<template>
  <div
    style="width: 1000px; position: absolute; margin-left: 22%; margin-top: 5%"
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item prop="type">
        <el-select
          style="width: 150px"
          v-model="ruleForm.type"
          clearable
          placeholder="请选择博客类型"
        >
          <el-option label="原创" value="原创"></el-option>
          <el-option label="翻译" value="翻译"></el-option>
          <el-option label="转载" value="转载"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="typeId">
        <el-select
          v-model="ruleForm.typeId"
          clearable
          placeholder="请选择博客分类"
          @click.native="getAllType"
        >
          <el-option
            v-for="item in typeArray"
            :key="item.id"
            :label="item.type_name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="tagIds">
        <el-select
          v-model="ruleForm.tagIds"
          multiple
          collapse-tags
          placeholder="请选择博客标签"
          @click.native="getAllTag"
        >
          <el-option
            v-for="item in tagArray"
            :key="item.id"
            :label="item.tag_name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-upload
          class="upload-demo"
          :drag="true"
          :action="url"
          :headers="headers"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或<em>点击上传(博客封面)</em>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item prop="title">
        <el-input
          v-model="ruleForm.title"
          placeholder="请输入博客标题"
        ></el-input>
      </el-form-item>
      <el-form-item prop="content">
        <el-input
          type="textarea"
          v-model="ruleForm.content"
          placeholder="请输入博客内容"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">发布</el-button>
        <el-button
          ><a href="#/home" style="text-decoration: none"
            ><font style="color: black">返回</font></a
          ></el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        title: "",
        type: "",
        typeId: null,
        tagIds: [],
        content: "",
        userId: JSON.parse(sessionStorage.getItem("user")).id,
      },
      tagArray: [],
      typeArray: [],
      url: "http://localhost:8081/blog/pic",
      rules: {
        title: { required: true, message: "请输入活动名称", trigger: "blur" },
        type: { required: true, message: "请选择博客类型", trigger: "change" },
        typeId: {
          required: true,
          message: "请选择博客分类",
          trigger: "change",
        },
        tagIds: {
          required: true,
          message: "请选择博客标签",
          trigger: "change",
        },
        content: { required: true, message: "请输入博客内容", trigger: "blur" },
      },
    };
  },
  computed: {
    headers() {
      return { Authorization: sessionStorage.getItem("tokenStr") };
    },
  },
  methods: {
    onSubmit() {
      let token = sessionStorage.getItem("tokenStr");
      if (token === null || token === "") {
        this.$message.warning("请先登录");
        return;
      }
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.$post("/", this.ruleForm).then((res) => {
            if (res.code == 200) {
              this.ruleForm = {};
            }
          });
        } else {
          this.$message.error("数据校验失败，请检查");
        }
      });
    },
    getAllType() {
      this.$get("type/blog").then((res) => {
        if (res) {
          this.typeArray = res;
        }
      });
    },
    getAllTag() {
      this.$get("tag/blog").then((res) => {
        if (res) {
          this.tagArray = res;
        }
      });
    },
    beforeAvatarUpload(file) {
      var testMsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      if (testMsg != "jpg" && testMsg != "jpeg" && testMsg != "png") {
        this.$message({
          message: "上传文件只能是jpg、jpeg、png格式",
          type: "error",
        });
        return false;
      }
      return true;
    },
    handleAvatarSuccess(res) {
      if (res.code == 200) {
        this.$message.success(res.message);
      } else {
        this.$message.error(res.message);
      }
    },
  },
};
</script>

<style>
</style>